import { defineStore } from 'pinia'
import type { AppState } from './types/appStateState'
import { store } from '@/stores'

/**
 * @description: App全局状态管理
 */
export const useAppStore = defineStore({
  id: 'simple-app',
  state: (): AppState => ({
    menuCollapse: false,
    menuWidth: 200,
    isMobile: false,
    mobileMenuCollapse: false,
    headerHeight: 0
  }),
  getters: {},
  actions: {
    /**
     * 设置菜单高度
     * @param height 宽度
     */
    setHeaderHeight(height: number) {
      this.headerHeight = height
    },
    /**
     * 切换菜单折叠
     */
    toggleMenuCollapse() {
      // 手机端
      if (this.isMobile) {
        this.mobileMenuCollapse = !this.mobileMenuCollapse
        this.menuCollapse = false
      } else {
        this.menuCollapse = !this.menuCollapse
      }
      if (!this.isMobile) {
        this.menuWidth = this.menuCollapse ? 50 : 200
      }
    },
    /**
     * 手机端菜单切换
     */
    mobileMenuSwitch() {
      if (this.mobileMenuCollapse && this.isMobile) {
        this.toggleMenuCollapse()
      }
    }
  },
  persist: {
    key: 'simple-app',
    storage: localStorage
  }
})

export function useAppStoreHook() {
  return useAppStore(store)
}
